import IconFont from "@/components/IconFont";
import { WechatOutlined, WeiboOutlined } from "@ant-design/icons";
import { Divider, Space } from "antd";
import React, { CSSProperties } from "react";
const iconStyles: CSSProperties = {
	color: "rgba(0, 0, 0, 0.2)",
	fontSize: "18px",
	verticalAlign: "middle",
	cursor: "pointer"
};
export type LoginActionsProps = {
	onClick: (type: string) => void;
};
const LoginActions: React.FC<LoginActionsProps> = ({ onClick = (type: string) => {} }) => {
	const handleClientAction = (type: string) => {
		onClick(type);
	};
	return (
		<>
			<div
				style={{
					display: "flex",
					justifyContent: "center",
					alignItems: "center",
					flexDirection: "column"
				}}
			>
				<Divider plain>
					<span style={{ color: "#CCC", fontWeight: "normal", fontSize: 14 }}>其他登录方式</span>
				</Divider>
				<Space align="center" size={24}>
					<div
						style={{
							cursor: "pointer",
							display: "flex",
							justifyContent: "center",
							alignItems: "center",
							flexDirection: "column",
							height: 40,
							width: 40,
							border: "1px solid #D4D8DD",
							borderRadius: "50%"
						}}
					>
						<IconFont
							type="icon-feishu1"
							style={{ fontSize: "28px", paddingTop: "3px" }}
							onClick={() => handleClientAction("feishu")}
						/>
					</div>
					<div
						style={{
							display: "flex",
							justifyContent: "center",
							alignItems: "center",
							flexDirection: "column",
							height: 40,
							width: 40,
							border: "1px solid #D4D8DD",
							borderRadius: "50%"
						}}
					>
						<WechatOutlined style={{ ...iconStyles, color: "#2ecc71" }} onClick={() => handleClientAction("wechat")} />
					</div>
					<div
						style={{
							display: "flex",
							justifyContent: "center",
							alignItems: "center",
							flexDirection: "column",
							height: 40,
							width: 40,
							border: "1px solid #D4D8DD",
							borderRadius: "50%"
						}}
					>
						<IconFont
							style={{ ...iconStyles, color: "#333333" }}
							onClick={() => handleClientAction("weibo")}
							type={"icon-weibo"}
						/>
						{/* <WeiboOutlined style={{ ...iconStyles, color: "#333333" }} onClick={() => handleClientAction("weibo")} /> */}
					</div>
				</Space>
			</div>
		</>
	);
};
export default LoginActions;
